<template>
	<view class="content">
		<view class="top-center">
			<view class="top-title">
				填写组队信息
			</view>
			<view class="center-box">
				<view class="itme">
					<view class="left-title">
						队伍名称:
					</view>
					<input class="right" type="text" v-model='fromData.teamName' placeholder="请输入队伍名称" />
				</view>
				<view class="user-index itme">
					<view class="left-title">
						队伍人数:
					</view>
					<view class="right">
						<picker @change="bindPickerChangeUserInfo" :value="ViewInfo.teamUserIndex"
							:range="ViewInfo.userIndex">
							<view>
								{{ViewInfo.userIndex[ViewInfo.teamUserIndex]}}
							</view>
						</picker>
					</view>
				</view>
				<view class="huodongrqi itme">
					<view class="left-title">
						开始日期:
					</view>
					<view class="right">
						{{fatherData.start_date}}
					</view>
				</view>
				<view class="time-btn itme">
					<view class="left-title">
						开始时间:
					</view>
					<view class="right">
						<picker mode="time" :value="fromData.startTime" @change="bindDateChangeStartTime"
							:end='fromData.endTime'>
							<view class="uni-input">
								{{fromData.startTime}}
							</view>
						</picker>
					</view>
				</view>
				<view class="time-btn itme">
					<view class="left-title">
						结束时间:
					</view>
					<view class="right">
						<picker mode="time" :value="fromData.endTime" @change="bindDateChangeEndTime"
							:start='fromData.startTime'>
							<view class="uni-input">{{fromData.endTime}}</view>
						</picker>
					</view>
				</view>
				<view class="item scroll">
					<view class="left-title left-box">
						开启队内聊天:
					</view>
					<view class="">
						<switch checked @change="btnCheckChange" />
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="faqiBtn()">
				确认发起组队
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		zuduiDating,
		getNoUse

	} from '@/api/mine_api.js'

	import {
		getCreateMessage
	} from '@/api/message_api.js'

	import {
		onShow,
		onLoad,
	} from '@dcloudio/uni-app'

	// 上级参数
	const fatherData = ref({})
	// 页面固定数据
	const ViewInfo = reactive({
		openId: '',
		userIndex: [2, 4],
		teamUserIndex: 0
	})


	// 用户表单
	const fromData = reactive({
		startTime: '9:00',
		endTime: '12:00',
		teamName: '',
		teamUser: '',
		messgae: true
	})

	// 开始时间
	const bindDateChangeStartTime = (e) => {
		fromData.startTime = e.detail.value
	}
	// 结束时间
	const bindDateChangeEndTime = (e) => {
		fromData.endTime = e.detail.value
	}
	// 用户人数选择
	const bindPickerChangeUserInfo = (e) => {
		console.log(e.detail.value);
		fromData.teamUser = e.detail.value
		ViewInfo.teamUserIndex = e.detail.value
	}

	// 是否开启队内聊天
	const btnCheckChange = (e) => {
		fromData.messgae = e.detail.value
	}

	// 发起组队
	const faqiBtn = () => {
		let data = {
			name: fromData.teamName,
			shuliang: ViewInfo.userIndex[ViewInfo.teamUserIndex],
			yuyueid: fatherData.value.record_id,
			openid: ViewInfo.openId,
			start: timeReact(fatherData.value.start_date, fromData.startTime),
			end: timeReact(fatherData.value.start_date, fromData.endTime),
			is_huihua:fromData.messgae
		};
		console.log(data);
		uni.showLoading({
			title: '加载中'
		})
		zuduiDating(data).then((res) => {

			console.log(res);
			
			if (res.result == '创建成功。') {
				uni.hideLoading()
				uni.showToast({
					title: '组队创建完成',
					icon: 'success',
					duration: 2000
				})

			} else {
				uni.hideLoading()
				uni.showModal({
					title: '提示',
					content: res.result
				})
			}
		});
	}

	// 时间格式化函数
	const timeReact = (day, time) => {
		let data = day + ' ' + time + ':00';
		return data;
	}

	onLoad((res) => {
		uni.getStorage({
			key: 'openid',
			success: function(res2) {
				ViewInfo.openId = res2.data.openid
			}
		})
		fatherData.value = JSON.parse(decodeURIComponent(res.data))
		console.log('发起组队页面上级传入参数', fatherData.value);
	})
</script>

<style scoped lang="scss">
	.content {
		position: relative;
		min-height: 100vh;
		background: linear-gradient(to bottom, rgba(135, 213, 255, 1) 0%, rgba(211, 211, 211, 0.58) 42%, rgba(211, 211, 211, 0) 100%);

		.top-center {
			padding-top: 40rpx;

			.top-title {
				margin: 0 20rpx 20rpx 20rpx;
				padding: 20rpx;
				text-align: center;
				background-color: white;
				border-radius: 20rpx;
				color: lightblue;
			}

			.center-box {
				height: 400rpx;
				margin: 20rpx 20rpx 0 20rpx;
				padding: 20rpx;
				background-color: white;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 30rpx;

				.itme {
					display: flex;

					.right {
						padding-left: 40rpx;
					}
				}

				.scroll {
					display: flex;

					.left-box {
						margin-right: 40rpx;
					}
				}

			}
		}

		.btn-box {
			position: fixed;
			width: 100vw;
			bottom: 0;

			.btn {
				margin: 20rpx 20rpx 60rpx 20rpx;
				padding: 30rpx;
				border-radius: 20rpx;
				position: relative;
				text-align: center;
				color: white;
				background-color: #2ab4ff;
				margin-bottom: 20rpx;
			}
		}
	}
</style>